<template>
  <el-dialog :title="title" v-model="visible" class="dialog-sm" append-to-body @close="close">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" v-loading="loading">
      <el-form-item label="岗位名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入岗位名称" maxlength="64" />
      </el-form-item>
      <el-form-item label="岗位编码" prop="pos_key">
        <el-input v-model="form.pos_key" placeholder="请输入编码名称" maxlength="64" />
      </el-form-item>
      <el-form-item label="岗位顺序" prop="list_sort">
        <el-input-number v-model="form.list_sort" controls-position="right" :min="0" />
      </el-form-item>
      <el-form-item label="岗位状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" maxlength="250" />
      </el-form-item>
    </el-form>
    <div class="dialog-footer slot">
      <el-button class="medium" type="primary" :loading="submitting" :disabled="loading" @click="handleSubmit"
        >确 定</el-button
      >
      <el-button class="medium" @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script setup name="PostForm">
  import { infoPostApi, editPostApi, addPostApi } from '@/api/system/post'

  const props = defineProps({ row: Object, moduleName: String })
  const visible = defineModel()
  const { proxy } = getCurrentInstance()

  const data = reactive({
    title: '',
    loading: false,
    loading: false,
    submitting: false,
    form: {
      name: undefined,
      pos_key: undefined,
      status: '1',
      list_sort: 10,
      remark: undefined
    },
    rules: {
      name: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
      pos_key: [{ required: true, message: '岗位编码不能为空', trigger: 'blur' }],
      list_sort: [{ required: true, message: '岗位顺序不能为空', trigger: 'blur' }]
    }
  })
  const { title, loading, submitting, form, rules } = toRefs(data)
  const { sys_normal_disable } = proxy.useDict('sys_normal_disable')

  onMounted(async () => {
    loading.value = true
    form.value.id = props.row?.id || undefined
    if (form.value.id) {
      title.value = '编辑' + props.moduleName
      await getRowData()
    } else {
      title.value = '添加' + props.moduleName
    }
    loading.value = false
  })

  // 获取编辑时的信息
  async function getRowData() {
    try {
      const { info } = await infoPostApi(form.value.id)
      form.value = proxy.dataToForm(form.value, info)
    } catch (error) {
      console.log('InfoPostApi error', error)
      close()
    }
  }

  // 提交保存
  const formRef = useTemplateRef('formRef')
  async function handleSubmit() {
    try {
      const valid = await formRef.value.validate()
      if (!valid) return
    } catch (error) {
      return
    }
    if (submitting.value) return
    submitting.value = true
    try {
      await proxy.$modal.confirm('确定提交表单数据？')
      let res = null
      if (form.value.id) {
        res = await editPostApi(form.value)
      } else {
        res = await addPostApi(form.value)
      }
      close(true, res?.msg || '操作成功')
    } catch (e) {
      console.log('savePostApi error', e)
      submitting.value = false
    }
  }

  // 关闭弹窗
  const emit = defineEmits(['close', 'submit'])
  function close(submit = false, msg = '') {
    if (msg) submit === true ? proxy.$modal.msgSuccess(msg) : proxy.$modal.msgError(msg)
    visible.value = false
    if (submit === true) emit('submit')
    emit('close', submit === true)
  }
</script>
